<!-- =============异常记录============ -->
<template>
	<view class="page">
		<view class="w">
			<view class="header">异常状态-<span>{{show_nfcId}}</span>号</view>
			<view class="content">
				<u-tabs-swiper ref="uTabs" name="statu" :list="list" @change="tabsChange" :is-scroll="false"
					:show-bar="showBar" active-color="#f29100" inactive-color="#303133" :current="current"
					font-size="34"></u-tabs-swiper>
			</view>
			<view class="swiper">
				<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
					style="height: 70vh;">
					<swiper-item class="swiper-item" style="height: 100%;width: 100%;">
						<cage-number :bg-color="[breakage_bgColor,breakage_bgColor_ex]" :exp="'破损'"
							:abnormal="'breakage'" :cage-num="cageNum" :cage-count="cageCount"></cage-number>
					</swiper-item>
					<swiper-item class="swiper-item">
						<cage-number :bgColor="[single,single_ex]" :exp="'单蛋'" :abnormal="'single'" :cage-num="cageNum" :cage-count="cageCount"></cage-number>
					</swiper-item>
					<swiper-item class="swiper-item">
						<cage-number2 :numList="[1,2]" :cage-num="cageNum" :cage-count="cageCount"></cage-number2> <!-- 死种 -->
					</swiper-item>
					<swiper-item class="swiper-item">
						<cage-number2 :numList="[1,2,3,4]" :cage-num="cageNum" :cage-count="cageCount"></cage-number2> <!-- 死仔 -->
					</swiper-item>
					<swiper-item class="swiper-item">
						<cage-number :bgColor="[spermatozonia,spermatozonia_ex]" :exp="'光蛋'"
							:abnormal="'spermatozonia'" :cage-num="cageNum" :cage-count="cageCount"></cage-number>
					</swiper-item>
					<swiper-item class="swiper-item">
						<cage-number :bgColor="[abandon,abandon_ex]" :exp="'弃仔'" :abnormal="'abandon'" :cage-num="cageNum" :cage-count="cageCount"></cage-number>
					</swiper-item>
					<swiper-item class="swiper-item">
						<cage-number :bgColor="[discard,discard_ex]" :exp="'弃孵'" :abnormal="'discard'" :cage-num="cageNum" :cage-count="cageCount"></cage-number>
					</swiper-item>
					<swiper-item class="swiper-item">
						<cage-number :bgColor="[out_bgColor,out_bgColor_ex]" :exp="'淘汰'"
							:abnormal="'out'" :cage-num="cageNum" :cage-count="cageCount"></cage-number>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import cageNumber from '@/pages/cagenumber/cagenumber'
	import cageNumber2 from '@/pages/cagenumber/cagenumber2'

	export default {
		components: {
			cageNumber,
			cageNumber2
		},
		data() {
			return {
				list: [{
					statu: '破损'
				}, {
					statu: '单蛋'
				}, {
					statu: '死种'
				}, {
					statu: '死仔'
				}, {
					statu: '光蛋'
				}, {
					statu: '弃仔'
				}, {
					statu: '弃孵'
				}, {
					statu: '淘汰'
				}],

				abnormalList: [
					'breakage',
					'single',
					'oldDead',
					'youngDead',
					'spermatozonia',
					'abandon',
					'discard',
					'out'
				],

				current: 0,
				swiperCurrent: 0,
				breakage_bgColor: '#de9793',
				breakage_bgColor_ex: 'linear-gradient(135deg, #de9793, #ffd778 100%)',
				single: '#e7d9b1',
				single_ex: 'linear-gradient(135deg, #eee4a9, #868ebe 100%)',
				spermatozonia: '#afd396',
				spermatozonia_ex: 'linear-gradient(135deg, #afd396, #bdb8ff 100%)',
				abandon: '#43c6f9',
				abandon_ex: 'linear-gradient(135deg, #43c6f9, #df58f9 100%)',
				discard: '#aaaaff',
				discard_ex: 'linear-gradient(135deg, #aaaaff, #aa00ff 100%)',
				out_bgColor: '#ed5642',
				out_bgColor_ex: 'linear-gradient(135deg, #ed5642, #ffaaff 100%)',

				showBar: true,
				cageNum: [], // 存储鸽笼数量数据
				cageCount: 6, // 默认显示6个，会根据实际数据动态调整
				isLoading: false
			}
		},
		watch: {
			// 监听nfcId变化，重新获取数据
			nfcId(newValue, oldValue) {
				if (newValue !== oldValue) {
					this.requestCageNum();
				}
			},
			// 监听 cageStatu 变化，动态更新鸽笼数量
			cageStatu: {
				handler(newVal) {
					if (newVal && newVal.length > 0) {
						this.cageCount = newVal.length;
						console.log('异常记录页面 - cageStatu 变化，鸽笼数量:', this.cageCount);
					}
				},
				immediate: true,
				deep: true
			}
		},
		onShow() {
			this.showBar = true
			this.$nextTick(() => {
				this.showBar = true
			})
			this.requestCageNum(); // 页面显示时请求鸽笼数量
		},
		computed: {
			...mapGetters(['nfcId', 'show_nfcId', 'cageStatu'])
		},
		methods: {
			// 请求鸽笼数量数据 - 使用与调仔页面相同的方式
			async requestCageNum() {
				this.isLoading = true;
				try {
					const obj = {
						siteId: uni.getStorageSync('siteId'),
						houseId: this.nfcId,
					}
					console.log('异常记录页面 - 获取鸽笼状态参数:', obj);
					
					// 使用与调仔页面相同的方法获取鸽笼状态
					await this.$store.dispatch('getStatu', obj);
					
					// 从 Vuex getters 中获取 cageStatu，它的长度就是实际的鸽笼数量
					const cageStatu = this.$store.getters.cageStatu;
					
					if (cageStatu && cageStatu.length > 0) {
						this.cageCount = cageStatu.length;
						console.log('异常记录页面 - 实际鸽笼数量:', this.cageCount);
					} else {
						this.cageCount = 6; // 如果没有数据，默认显示6个
						console.warn('异常记录页面 - 未获取到鸽笼状态数据，使用默认数量:', this.cageCount);
					}
					
				} catch (error) {
					console.error('获取鸽笼数量失败:', error);
					this.cageCount = 6; // 失败时使用默认数量
					this.$refs.uToast.show({
						title: '获取鸽笼数据失败',
						type: 'error',
						duration: 1500,
						position: 'top'
					});
				} finally {
					this.isLoading = false;
				}
			},
			
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				this.$store.commit('SETABNORMAL', this.abnormalList[current])
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
	}

	.home-bg {
		background: url(@/static/images/bg-home.png) no-repeat;
		background-size: 100% auto;
	}

	.index {
		background-size: 100% auto;
	}

	.header {
		width: 100%;
		padding: 10px 10px;
		text-align: center;
		font-size: 45.7rpx;
		font-weight: bold;

		span {
			font-size: 21.94rpx;
			color: deepskyblue
		}
	}
</style>